<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta charset="utf-8">
		<!-- 响应式布局代码 -->
		<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"/>
		<title>作业二</title>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="UTF-8"></script>
		<!-- 加载bootstrap  css样式 -->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- 加载bootstrap  js脚本 -->
		<script src="js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
		<link rel="stylesheet" href="css/font-awesome.min.css" />
	</head>
	<body>
		<nav class="navbar navbar-expand-lg navbar-dark p-0" style="background-color: #424242;">
		  <a class="navbar-brand p-2" href="#">某管理系统</a>
		  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
		    <span class="navbar-toggler-icon"></span>
		  </button>
		  <div class="collapse navbar-collapse" id="navbarNav">
		    <ul class="nav navbar-nav">
		      <li class="nav-item active">
		        <a class="nav-link p-3" data-toggle="tab" href="#c1">首页 <span class="sr-only">(current)</span></a>
		      </li>
		      <li class="nav-item">
		        <a class="nav-link p-3 dropdown-toggle" data-toggle="tab" href="#c2">功能</a>
		      </li>
		      <li class="nav-item">
		        <a class="nav-link p-3" data-toggle="tab" href="#c3">帮助</a>
		      </li>
		    </ul>
		  </div>
		  <div>
			  <input type="submit" class="float-right m-1" value="登录" style="border-radius: 5px;height: 35px;"/>
			  <input type="text" class="float-right m-1" placeholder="密码" style="border-radius: 5px;height: 35px;"/>
			  <input type="text"  class="float-right m-1" placeholder="用户名" style="border-radius: 5px;height: 35px;"/>
		  </div>
		</nav>
		
		
		<div class="tab-content col-12">
			<div id="c1" class="tab-pane active p-0 col-12">
				<div class="float-left col-2 p-0" style="background-color: lightgray;height: 130px;">
					<div class="col-12 text-center btn-info" style="margin-top: 10px;height: 30px;line-height: 30px;"><a href="#" style="color: white;">首页</a></div>
					<div class="col-12 text-center" style="height: 30px;line-height: 30px;"><a href="#">信息建立</a></div>
					<div class="col-12 text-center" style="height: 30px;line-height: 30px;"><a href="#">信息查询</a></div>
					<div class="col-12 text-center" style="height: 30px;line-height: 30px;"><a href="#">信息管理</a></div>
				</div>
				
				
				<div class="float-left col-10">
					<h3>管理控制台</h3>
					<hr>
					<div>
						<button class="btn btn-default" style="border: 1px solid gray;">操作1</button>
						<button class="btn btn-primary">按钮</button>
						<button class="btn btn-warning">按钮</button>
						<button class="btn btn-danger">按钮</button>
						<button class="btn btn-success">按钮</button>
						<button class="btn btn-info">按钮</button>
					</div>
					<br>
					<div class="col-6 float-left">
						<div class="bg-info" style="line-height: 40px; height: 40px; border-radius: 5px;">最新提醒</div>
						<div class="bg-white p-3" style="border: 1px solid skyblue;">
							<div class="alert alert-danger alert-dismissible fade show">
								<button type="button" class="close" data-dismiss="alert">&times;</button>
								<strong>警告</strong>具体内容！
							</div>
							
							<div class="alert alert-primary">
								<strong>操作</strong>OK!
							</div>
							
							<div class="alert alert-warning alert-dismissible fade show" role="alert">
								<strong>Holy guacamole!</strong> You should check in on some of those fields below.
								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
						</div>
					</div>
					<div class="col-5 float-left">
						<div class="bg-info" style="line-height: 40px; height: 40px; border-radius: 5px;">我的任务</div>
						<div class="bg-white p-3" style="border: 1px solid skyblue;">
							<div class="alert alert-danger alert-dismissible fade show">
								<button type="button" class="close" data-dismiss="alert">&times;</button>
								<strong>警告</strong>具体内容！
							</div>
							
							<div class="alert alert-primary">
								<strong>操作</strong>OK!
							</div>
							
							<div class="alert alert-warning alert-dismissible fade show" role="alert">
								<strong>Holy guacamole!</strong> You should check in on some of those fields below.
								<button type="button" class="close" data-dismiss="alert" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
						</div>
					</div>
					<br><br>
					<div class="col-5 float-left">
						<div class="bg-info" style="line-height: 40px; height: 40px; border-radius: 5px;">最新订单</div>
						<table class="table table-bordered table-striped table-hover">
							<thead>
								<tr>
									<th>学号</th>
									<th>姓名</th>
									<th>班级</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>1</td>
									<td>张三</td>
									<td>高三1班</td>
								</tr>
								<tr>
									<td>2</td>
									<td>李四</td>
									<td>高三3班</td>
								</tr>
								<tr>
									<td>3</td>
									<td>王五</td>
									<td>高三2班</td>
								</tr>
							</tbody>
						</table>
						<button class="btn-primary" style="width: 40px;height: 25px;"></button>
					</div>
					<div class="col-5 float-left">
						<div class="bg-info" style="line-height: 40px; height: 40px; border-radius: 5px;">工程进度</div>
						<div style="border: 1px solid gray;"><br>
							<div class="bg-info" style="width: 100px;border-radius: 5px;">水井挖掘工程</div>
							<div class="progress progress-sm m-2">
								<div class="progress-bar" style="width: 60%;"></div>
							</div>
							<div class="bg-info" style="width: 70px;border-radius: 5px;">基建工程</div>
							<div class="progress progress-sm m-2">
								<div class="progress-bar" style="width: 80%;">60%</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</body>
</html>
